<template>
	<view>
		<list-header>
			<!-- 插槽使用 -->
			<template #title>猜你喜欢</template>
			<template #tips>更多推荐</template>
		</list-header>
		<view class="flex align-center">
			<block v-for="(item, index) in reBooks" :key="index">
				<view class="flex flex-column align-center flex-1 position-relative" @click="toBookDetail(index)">
					<image :src="item.src" mode="widthFix" class="w-100"></image>
					<text class="font my-1 text-light-black">{{item.name}}</text>
					<my-icon 
					iconId="icon-erji" 
					iconColor="text-light-white"
					class="position-absolute text-light-white"
					style="left:47rpx;top:20rpx;"
					/>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import ListHeader from '@/components/listHeader.vue';
	export default {
		props:{
			reBooks:{
				type: Array,
				default: []
			}
		},
		components:{
			ListHeader
		},
		methods:{
			toBookDetail(index){
				if(index === 0){
					uni.navigateTo({
						url: '/pages/bookDetail/bookDetail'
					})
				}
				
			}
		}
	}
</script>

<style>
</style>
